body {
  background-color: #4e4f51;
}
header {
  height: 40px;
  margin-left: 30px;
  margin-top: 30px;
  font-size: 18px;
  color: #fff;
}
.main {
  margin-top: 90px;
  margin-left: 40px;
  position: relative;
  height: 300px;
  width: 300px;
  background-color: #f2f2f2;
}
.main .main-1,
.main .main-2,
.main .main-3,
.main .main-4 {
  position: absolute;
  height: 50px;
  width: 50px;
}
.main .main-1 {
  border-top: 4px solid #1f9ff8;
  border-left: 4px solid #1f9ff8;
}
.main .main-2 {
  right: 0;
  border-top: 4px solid #1f9ff8;
  border-right: 4px solid #1f9ff8;
}
.main .main-3 {
  bottom: 0;
  border-bottom: 4px solid #1f9ff8;
  border-left: 4px solid #1f9ff8;
}
.main .main-4 {
  bottom: 0;
  right: 0;
  border-bottom: 4px solid #1f9ff8;
  border-right: 4px solid #1f9ff8;
}
.main .main-zhong {
  width: 300px;
  height: 1px;
  background-color: #1f9ff8;
  animation: yidong 2s infinite linear;
}
@keyframes yidong {
  from {
    transform: translateY(0px);
  }
  to {
    transform: translateY(300px);
  }
}
.main-zi {
  color: #fff;
  margin-top: 20px;
  margin-left: 110px;
}
.main-zhao {
  color: #fff;
  margin-top: 50px;
  margin-left: 160px;
}
.main-zhao button {
  border: none;
  background: none;
  color: #fff;
  margin-left: 5px;
}
.main-zhao-1 {
  color: #ffc718;
  margin-top: 50px;
  margin-left: 160px;
  display: none;
}
.main-zhao-1 button {
  border: none;
  background: none;
  color: #ffc718;
  margin-left: 5px;
}
